body{

    background-color: black ;

    margin: 0;

    margin: 0;

    overflow: hidden

}

html {

    font-family: sans-serif;

}

#canvas{

    display: block;

    margin-left: auto;

    margin-right: auto;

}







.header{background: #333}

.header__logo{color:#fff; float:left;display: block;padding:20px;text-decoration: none;}

.header__menu{float:right;margin:0; padding:0;}

.header__menu__item{display: inline-block;}

.header__menu__item a{color:#fff;display: block;padding:20px;text-decoration: none}

.header__menu__item a:hover{background: #000}

.header__icon-bar{display: block;float: right;padding:20px;display: none;}

.header__icon-bar span{display: block;height:3px; width: 30px;background: #fff; margin-bottom: 5px;}



#regole{

    color: white;

    margin-top: 3%;

    font-size: 3.5em;

    width: fit-content;

    height: fit-content;

    margin-left: auto;

    margin-right: auto;

    border: #333 solid 3px;

    background-color: limegreen;

    text-align: center;

    border-radius: 30px 30px 30px 30px;

    padding: 0 1em 1em 1em;

}

#testo{

    font-size: 0.5em;

}

#button{

    color: white;

    background-color: limegreen;

    margin-top: 10%;

    border: #333 solid 3px;

    border-radius: 30px 30px 30px 30px;

    height: fit-content;

    width: fit-content;

    padding: 0.5em;

    font-size: 0.5em;

}



#punti{

    margin-top: 0.5%;

    margin-bottom: 0.5%;

    color: white;

    position: relative;

    text-align: center;

    font-size: 2em;

    text-decoration: none;

    display: list-item;

}



.skin{

    position: fixed;

    transform: translate(-50%, 0);

    margin-top: 5%;

    margin-left: 50%;

    margin-right: auto;

    width: fit-content;

    height: fit-content;

    padding: 0% 2% 2% 2%;

    background-color: #333;

    border-radius: 30px;

}

.skin p{

    text-align: center;

    font-size: 2.5em;

}

.riga1{

    width: fit-content;

    margin-left: auto;

    margin-right: auto;

    margin-bottom: 2%;

}

#ball_football{

    display: inline-block;



}

#ball_basket{

    display: inline-block;

}

#ball_volley{

    display: inline-block;



}

.riga2{

    width: fit-content;

    margin-left: auto;

    margin-right: auto;

    margin-top: 1%;

    margin-bottom: 2%;

}

#ball_8{

    display: inline-block;

}

#ball_baseball{

    display: inline-block;

}

#ball_golf{

    display: inline-block;

}





.riga3{

    width: fit-content;

    margin-left: auto;

    margin-right: auto;

    margin-top: 2%;

    margin-bottom: 2%;

}

#ball_tennis{

    display: inline-block;

}

#ball_select{

    display: inline-block;

}

#ball_beach{

    display: inline-block;

}



#animation{

    position: absolute;

    transform: translate(-50%, 0);

    margin-left: 50%;

    margin-right: auto;

}



#animation_rick{

    position: absolute;

    transform: translate(-50%, 0);

    margin-left: 50%;

    margin-right: auto;

}